<!DOCTYPE html>
<html>
<head>
  <title>新建待办事项</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="description" content=""/>
  <link href="/plugins/sui/sui.min.css" rel="stylesheet" />
  <link href="/plugins/sui/sui-append.min.css" rel="stylesheet" />
</head>
<body>
<div class="sui-container">
    <ul class="sui-breadcrumb">
      <li><a href="#">待办事项</a></li>
      <li class="active">添加待办事项</li>
    </ul>
    <div class="sui-msg msg-large msg-block msg-success">
      <div class="msg-con">
        新的待办事项”晚上9点拿夜宵”创建成功！
      </div>
      <s class="msg-icon"></s>
    </div>
    <form class="sui-form form-horizontal sui-validate" action="" method="post" id="servingForm">
      <div class="control-group">
        <label class="control-label">名称：</label>
        <div class="controls">
          <input class="input-xlarge" type='text' data-rules="required|minlength=2|maxlength=50" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">时间：</label>
        <div class="controls">
          <select class="input-medium " name='month' data-rules='required'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">8</option>
            <option value="8">9</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          月
          <select class="input-medium " name='date' data-rules='required'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">8</option>
            <option value="8">9</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          日
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">补充说明：</label>
        <div class="controls">
          <textarea class='input-xlarge' data-rules='maxlength=100'></textarea>
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <button class="sui-btn btn-primary btn-xlarge">创建待办事项</button>
        </div>
      </div>
    </form> 
  </div>
  <div class="sui-container">
  <form name="hugeAForm"  id="hugeAForm" method="post" >
	  <table class="sui-table table-primary table-zebra">
	  <thead>
	    <tr>
	      <th>随机数字</th>
	      <th>字母</th>
	      <th>短字符串</th>
	      <th>长字符串</th>
	      <th>日期</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr th:each="row, iterStat :${hugeA_datas}" >
	      <td th:text="${row.rnum }" />
	      <td th:text="${row.rstr1 }" />
	      <td th:text="${row.rstr2 }" />
	      <td th:text="${row.rstr3 }" />
	      <td th:text="${row.rdate }" />
	    </tr>
	  </tbody>
	</table>
	<input type="hidden" id="pageNo" name="pageNo" th:value="${pageNo }"></input>
	<input type="hidden" id="pageSize" name="pageSize" th:value="${pageSize }"></input>
	<input type="hidden" id="itemsCount" name="itemsCount" th:value="${itemsCount }"></input>
	<div id="pager" />
	</form>
  </div>
</body>
<script type="text/javascript" src="/plugins/sui/jquery.min.js" />
<script type="text/javascript" src="/plugins/sui/sui.min.js" />
<script>
 $(function () {
    var pageNo = parseInt(document.getElementById("pageNo").value);
	var pageSize = document.getElementById("pageSize").value;
	var itemsCount = document.getElementById("itemsCount").value;
	$('#pager').pagination({
		 itemsCount: itemsCount,
         pageSize: pageSize,
         currentPage: pageNo,
         displayPage: 6,
         displayInfoType: "itemsCount",
         styleClass: ['pagination-large'],
         showCtrl: true,  
         onSelect: function (num) {
      	  	goPage(num);
         }        
      });
});

function goPage(pageNo){
	document.getElementById("pageNo").value = pageNo;
	search();
}

function search(){
	document.getElementById("hugeAForm").target = "_self";
	document.getElementById("hugeAForm").action = "/huge/table";
	document.getElementById("hugeAForm").submit();
}
</script>
</html>